<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页和详情页</title>
</head>
<style>
    ul,
    li {

        list-style: none;
    }

    ul {
        display: flex;
        border: 1px solid red;
        justify-content: space-evenly;
        padding: 10px 0;
    }

    ul li {
        width: 24%;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        cursor: pointer;

    }

    ul li img {
        width: 90%;
    }

    ul li p {
        width: 90%;
        margin: 5px;
    }
</style>
<body>
<ul id="goods"></ul>
    <script>
var goodlist=[
{id=111,url:'img/g1.jpg',name:'女友1号',price:2001,age:17},
{id=121,url:'img/g2.jpg',name:'女友2号',price:2002,age:16},
{id=1,url:'img/g3.jpg',name:'女友3号',price:2003,age:15},
{id=171,url:'img/g4.jpg',name:'女友4号',price:2004,age:14},         
{id=171,url:'img/g4.jpg',name:'女友5号',price:2004,age:14},         
]
goodlist.forEach(function(item,index){
goods.innerHTML+='<li idx="'+item.id+'"class="goods"><img src="' +num1.url+'">'+
'<p>姓名：'+item.name+'</p>'+
'<p>价格：'+item.price+'</p>'+
'<p>年龄：'+item.age+'</p>'+
'</li>'
    })
    var list=document.getElementByTagNmae('li');
    for(var i=0;i<list.length;i++){
        list[i].onclik=function(){
            open('03.详情页.html?id'+this.getAttribute('idx'));
        }
    }
    </script>
</body>
</html>